<template>
  <el-dialog
    title="作业详情"
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
  >
    <div class="answer-list">
      <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
      <div class="answer-item" v-for="item in tableData" :key="item.id">
        <div class="title">
          <h2>{{ item.name }}</h2>
          <span class="el-icon-delete" @click="handleDelete(item)"></span>
        </div>
        <div class="my-answer">
          <div>{{ item.content }}</div>
          <p class="create-time">
            <span class="el-icon-time"></span>
            <span>{{ item.createTime }}</span>
          </p>
        </div>
        <div class="teacher-check">
          <el-divider content-position="center">教师批阅：</el-divider>
          <div class="check-wrap" v-if="item.eduTeacherComments.id">
            <p>评分：{{ item.eduTeacherComments.score }}</p>
            <p>内容：{{ item.eduTeacherComments.content }}</p>
          </div>
          <div class="empty" v-else>
            <p>暂无数据</p>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  eduStudentJobsQuery,
  eduStudentJobsDelete,
} from '@/api/admin/teach/eduStudentJobs.js'
export default {
  data() {
    return {
      dialogVisible: false,
      listQuery: {
        page: 1,
        limit: 10,
        jobId: undefined,
        createBy: this.$store.getters.userId,
      },
      tableData: [],
      pageObj: {},
    }
  },
  mounted() {
    this.$bus.$on('showDialogCheckAnswer', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogCheckAnswer')
  },
  methods: {
    //显示弹窗
    async init(row) {
      this.listQuery.jobId = row.id
      await this.getList()
      this.dialogVisible = true
    },
    async getList() {
      let res = await eduStudentJobsQuery(this.listQuery)
      this.tableData = res.data.data
      this.pageObj = res.data
    },
    //删除确认
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      eduStudentJobsDelete(row.id).then((res) => {
        this.getList()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.answer-list {
  max-height: 500px;
  overflow-y: auto;
  .answer-item {
    margin-bottom: 20px;
    border: 1px solid #eee;
    .title {
      background: #eee;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      color: #333;
      font-weight: bold;
      h2 {
        font-size: 14px;
        float: left;
        max-width: 80%;
        overflow: hidden;
      }
      span {
        float: right;
        cursor: pointer;
        line-height: 40px;
        font-size: 16px;
        &:hover {
          color: var(--colorH1);
        }
      }
    }
    .answer-title {
      font-size: 16px;
      color: #333;
    }
  }
  .my-answer {
    padding: 10px 10px 0px 10px;
    .create-time {
      span {
        color: #999;
        margin-right: 5px;
      }
    }
  }
  .teacher-check {
    padding: 0px 10px 10px 10px;
    // background: #eee;
    .empty {
      color: #999;
    }
  }
}
</style>